<template>
  <div id="app">
    <div id="back"><p>物流管理系统</p></div>
    <div id="login">
      <div style="margin-left: 100px; margin-bottom: 30px">管理员登录</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <el-input
            style="width: 200px"
            v-model="ruleForm.name"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            style="width: 200px"
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="svg">
          <el-input
            style="width: 100px; height: 50px"
            v-model="ruleForm.svg"
            placeholder="验证码"
          ></el-input>
          <div
            style="margin: 5px; padding-top: 10px"
            @click="getsvg()"
            v-html="svgs.imgs"
          ></div>
        </el-form-item>
        <el-button
          style="margin-left: 100px; width: 200px"
          type="primary"
          @click="submitForm()"
          >登录</el-button
        >
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from "../api/axios";

export default {
  data() {
    return {
      ruleForm: {
        name: "",
        pass: "",
        svg: "",
      },
      rules: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        svg: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      svgs: {
        imgs: "",
        truei: "",
      },
    };
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getsvg();
    });
  },
  methods: {
    async submitForm() {
      console.log(this.ruleForm);
      const res = await axios.post("/login", {
        username: this.ruleForm.name,
        password: this.ruleForm.pass,
      });
      console.log(res);
      if (this.ruleForm.svg != this.svgs.truei) {
        alert("验证码错误");
      } else {
        if (res.status == "ok") {
          alert("登录成功");
          this.$router.push("/upss");
          localStorage.setItem("token", res.token);
        } else {
          alert("账号或密码错误");
        }
      }
    },
    async getsvg() {
      const res = await axios.get("/svg");
      this.svgs.imgs = res.data;
      this.svgs.truei = res.text;
    },
  },
};
</script>
<style>
p {
  padding-left: 100px;
  padding-top: 100px;
  color: aliceblue;
}
#back {
  margin: 0px;
  height: 315px;
  width: 500px;
  background-image: url("../../img/img.jpg");
  background-repeat: no-repeat;
}
#login {
  margin-top: 30px;
  height: 315px;
  width: 500px;
}
#app {
  display: flex;
}
</style>
